<!--
 *共用，搜索组件
 * @Author: 舒克
 * @Official Accounts: 氧化1028
 * @email: 143587623@qq.com
 * @github: https://gitee.com/KingSio
 * @Date: 2021-02-07 10:37:50
 * @LastEditTime: 2021-02-07 17:27:55
 * @FilePath: \Vue全栈后台\项目\vue_shop\src\components\common\SearchCommon.vue
-->
<template>
    <div>
        <el-input
            v-model="queryFrom.queryID"
            clearable
            @clear="getSearchID"
            placeholder="根据角色id搜索"
            width="10px"
          >
            <el-button
              @click="getSearchID"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
    </div>
</template>
<script>
import {getSearchIdData} from '@/api/powerApi'

export default {
    data(){
        return{
            queryFrom:{
                queryID:""//根据id查询用户
            },
            searchData:[],//存放搜索的数据
            
        }
    },
    methods:{
         //搜索用户事件，根据id查询搜索
        async getSearchID(){
            const {data:res}=await getSearchIdData( this.queryFrom.queryID);//查询接口
            if(res.meta.status!==200){
                return this.$message.error("没有该用户");
            }
            console.log(res.data)
            //成功后，传送到子组件
            this.searchData=res.data;
            this.$emit("searchIdData",this.searchData)      
             
        }
    }

}
</script>
<style lang="less" scoped>
.el-input{
    width: 30%;
    margin-bottom: 10px;
}
</style>